<template>
  <div class="main-box">
    <div class="comment-wall">
      <p class="p15">留言墙</p>
      <div ref="dragBoxRef" id="drag-box" class="drag-box">
        <div
          class="drag p10"
          v-drag
          :style="{
            background: rgba(0.5),
            top: random(80, 300) + 'px',
            left: random(0, width) + 'px'
          }"
          v-for="item in listInfo.list"
          :key="item.id">
          <p class="mb5">{{ item.user_name }}</p>
          {{ item.content }}
        </div>
      </div>
    </div>
    <div class="comment-editor">
      <p>留言</p>
      <commentEditor @submit="submit"></commentEditor>
      <div class="mt20">
        <commentList
          :isLeaveMessage="true"
          :list="listInfo.list"
          :count="listInfo.count"
          @clickMore="clickMore"
          @clickChildMore="clickChildMore"></commentList>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { random } from 'lodash-es';
  import { rgba } from '@/utils/utils';
  import {
    addLeaveMessage,
    getLeaveMessageList,
    getLeaveMessageChildList
  } from '@/apis/leavemessage';
  import commentEditor from '@/components/comment/comment-editor.vue';
  import commentList from '@/components/comment/comment-list.vue';
  import type { ICommentInfo, IComment, IPagination } from '@/apis/type';
  let dragBoxRef = ref();
  let width = ref(0);
  onMounted(() => {
    width.value = dragBoxRef.value?.clientWidth - 200;
  });

  const listParams: IPagination = {
    page: 1,
    pageSize: 10
  };
  // 评论信息
  const listInfo = ref({} as ICommentInfo);
  const getList = async () => {
    const res = await getLeaveMessageList(listParams);
    if (res.code == 200) {
      if (listInfo.value.list) {
        listInfo.value.list = listInfo.value.list.concat(res.data.list);
      } else {
        listInfo.value.list = res.data.list;
      }
      listInfo.value.count = res.data.count;
    }
  };
  getList();
  // 点击查看 回复评论 更多
  const clickChildMore = async (param: IComment) => {
    const params: IPagination = {
      pid: param.id,
      page: param.childPage + 1,
      pageSize: 5
    };
    const res = await getLeaveMessageChildList(params);
    listInfo.value.list.map((item: IComment) => {
      if (param.id == item.id) {
        ++item.childPage;
        if (item.children && item.children.length > (params.page - 1) * params.pageSize)
          item.children.length = (params.page - 1) * params.pageSize;
        item.children = (item.children || []).concat(res.data);
      }
    });
  };
  // 点击查看 评论 更多
  const clickMore = () => {
    listParams.page++;
    getList();
  };

  const submit = async (params: IComment) => {
    const obj = {
      ...params
    };
    const res = await addLeaveMessage(obj);
    if (res.code == 200) {
      ElMessage.success(res.msg);
      listInfo.value.list.unshift(obj);
      listInfo.value.count++;
    }
  };
</script>

<style lang="scss" scoped>
  .comment-wall {
    background-color: var(--bg-color);
  }
  .drag-box {
    width: 100%;
    height: 500px;

    position: relative;
    overflow: hidden;
    border-radius: 5px;
  }
  .drag {
    display: block;
    z-index: 60;
    background: rgb(233, 109, 113);
    border-radius: 300px 20px 20px 30px / 30px 300px 300px;
    touch-action: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    overflow: hidden;
    box-shadow: 0 2px 10px 1px rgb(0 0 0 / 20%);
    user-select: none;
    opacity: 0.88;
    p {
      border-bottom: 1px dashed var(--border-color);
    }
  }
  .comment-editor {
    background-color: var(--bg-color);
    padding: 15px;
    margin-top: 20px;
  }
</style>
